<template>
    <div>
        <!-- banner图 -->
        <div class="header-img"></div>
        <div class="conterer">
            <div class="conters">
                <!-- 左侧 -->
                <el-card class="xinxibox">
                    <div slot="header" class="clearfix">
                        <div class="imgbox1">
                            <!-- <el-avatar :size="60" @error="errorHandler">
                                <img src="" />
                            </el-avatar> -->
                            <img src="../assets/image/qiye3.png" alt="" style="width: 80px;" />
                        </div>
                        <span class="financing">{{ detail.fundingRound }}轮融资</span>
                        <span class="enterprise" style="margin-top: 30px;">{{ detail.bodyName }}</span>
                        <span class="enterprise">{{ detail.managerEmail }}</span>
                        <span><img src="../assets/image/address.png" alt="" style="width: 18px;" />{{
                            detail.businessAddress
                            }}{{ detail.businessAddressDetail }}</span>
                    </div>
                    <div class="clearfix">
                        <div>
                            <el-button type="text" class="text item" :class="{ 'active': currentTab === 'business' }"
                                @click="currentTab = 'business'">主营业务</el-button>
                        </div>
                        <div>
                            <el-button type="text" class="text item" :class="{ 'active': currentTab === 'data' }"
                                @click="currentTab = 'data'">数据业务</el-button>
                        </div>
                        <div>
                            <el-button type="text" class="text item" :class="{ 'active': currentTab === 'history' }"
                                @click="currentTab = 'history'">历史业绩</el-button>
                        </div>
                        <div>
                            <el-button type="text" class="text item" :class="{ 'active': currentTab === 'news' }"
                                @click="currentTab = 'news'">新闻动态</el-button>
                        </div>
                    </div>
                </el-card>
                <!-- 右侧 -->
                <el-card class="xianshi">
                    <!-- 主营业务内容 -->
                    <div v-show="currentTab === 'business'">
                        <div slot="header">
                            <div class="title-box">主营业务</div>
                            <div class="blue-line"></div>
                            <span>{{ detail.mainDescription }}</span>
                        </div>
                    </div>
                    <!-- 数据业务内容 -->
                    <div v-show="currentTab === 'data'">
                        <div slot="header">
                            <div class="title-box">数据业务</div>
                            <div class="blue-line"></div>
                            <span>{{ detail.dataDescription }}</span>
                        </div>
                    </div>
                    <!-- 历史业绩内容 -->
                    <div v-show="currentTab === 'history'">
                        <div slot="header">
                            <div class="title-box">历史业绩</div>
                            <div class="blue-line"></div>
                            <Editor :value="detail.performance" style="margin-top: 20px;"></Editor>
                        </div>
                    </div>
                    <!-- 新闻动态内容 -->
                    <div v-show="currentTab === 'news'">
                        <div slot="header">
                            <div class="title-box">新闻动态</div>
                            <div class="blue-line"></div>
                            <!-- 新闻内容 -->
                            <div class="box">
                                <ul class="list">
                                    <li v-for="(item, id) in newsList" :key="id" class="list-litem"
                                        @click="goDetail(item.id)">
                                        <div class="item">
                                            <div class="image"></div>
                                            <div class="list-text">
                                                <div class="title">
                                                    {{ item.title }}
                                                </div>
                                                <div class="content" v-html="item.content"></div>
                                                <div class="foot">
                                                    <p>{{ item.createTime }}</p>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <!-- 分页 -->
                            <div class="pagination">
                                <el-pagination background @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange" :current-page="queryParams.pageNum"
                                    :page-sizes="[1, 2, 3, 4, 5]" :page-size="queryParams.pageSize"
                                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                                </el-pagination>
                            </div>
                        </div>

                    </div>
                </el-card>
            </div>
        </div>
        <!-- 页面底部 -->
        <div>
            <Footer></Footer>
        </div>
    </div>
</template>

<script>
import { brandDetails, businessAddressName, JigouNewsList } from "../api/api";

export default {
    data() {
        return {
            currentTab: 'business', // 默认显示主营业务
            userId: null,
            newsList: [],
            detail: {},
            queryParams: {
                pageSize: 3,
                pageNum: 1,
                id: '',
            },
            total: 0,

        }
    },
    methods: {
        // 将获取数据的逻辑抽取为方法
        fetchData(userId) {
            brandDetails(userId)
                .then((res) => {
                    this.detail = res.data.data;
                    businessAddressName(this.detail.businessAddress).then((res) => {
                        this.detail.businessAddress = res.data.data.address;
                        this.detail.businessAddress = this.detail.businessAddress.replace(
                            /\//g,
                            ""
                        );
                    });
                })
                .catch((err) => {
                    // 处理错误
                });
        },
        getList() {
            JigouNewsList(this.queryParams).then((res) => {
                this.newsList = res.data.data.list;
                this.total = Number(res.data.data.total);
            })
        },
        handleSizeChange(val) {
            this.queryParams.pageSize = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.queryParams.pageNum = val;
            this.getList();
        },
        goDetail(id) {
            console.log("id", id)
            this.$router.push({
                path: '/BrandNesDetail',
                query: {
                    id: id
                }
            })
                .catch(err => { console.log(err) });
        },

    },
    beforeRouteEnter(to, from, next) {
        next(vm => {
            // 在导航确认前获取数据
            vm.userId = to.query.userId;
            vm.queryParams.id = to.query.userId;
            vm.fetchData(vm.userId);
            vm.getList();
        });
    },
    beforeRouteUpdate(to, from, next) {
        // 路由更新时重新获取数据
        this.userId = to.query.userId;
        this.queryParams.id = this.userId;
        this.fetchData(this.userId);
        this.getList();
        next();
    },
    mounted() {
        // mounted钩子可以保留，作为初始化的备用方案
        this.userId = this.$route.query.userId;
        this.queryParams.id = this.userId;
        // this.fetchData(this.userId);
        // this.getList();
    }
}
</script>

<style lang="less" scoped>
.header-img {
    height: 300px;
    background-image: url("../assets/image/xuqiu.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.conterer {
    width: 100%;
    display: flex;
    justify-content: center;
}

.conters {
    width: 80%;
    /* 可以调整这个宽度值来控制整体内容区域的宽度 */
    display: flex;
    justify-content: space-between;
}

.xinxibox {
    width: 300px;
    margin-right: 20px;
    text-align: center;
    min-height: 700px;
    /* 添加最小高度 */
}

.xianshi {
    flex: 1;
    min-height: 700px;
    /* 添加最小高度 */
}

/* 在style部分添加以下样式 */
.xianshi span {
    display: block;
    /* 让span变成块级元素以便设置margin */
    margin: 20px 20px 0 20px;
    /* 上、右、下、左的边距 */
    text-indent: 2em;
    /* 首行缩进2个字符 */
    text-align: left;
    /* 文本左对齐 */
}

.xinxibox {
    width: 300px;
    /* 左侧卡片宽度 */
    margin-right: 20px;
    text-align: center;
    /* 添加文字居中 */
}

/* 添加以下样式 */
.imgbox1 {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    position: relative;
}

.enterprise {
    display: block;
    margin: 5px 0;
}

.text.item {
    width: 100%;
    margin: 5px 0;
    text-align: center;
    justify-content: center;
    color: #a6adb6;
    font-weight: normal;
    /* 默认字体粗细 */
    font-size: 16px;
}

/* 激活状态的样式 */
.text.item.active {
    color: #000000;
    /* 文字变黑 */
    font-weight: 600;
    /* 文字加粗 */
}

.clearfix {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.xianshi {
    flex: 1;
}

.xianshi .el-card__header {
    padding: 0;
    position: relative;
    text-align: center;
    border-bottom: none !important;
}

.el-card.xianshi /deep/ .el-card__header {
    border-bottom: none !important;
}

.title-box {
    padding: 15px 20px;
    font-size: 24px;
    color: #0066ff;
    font-weight: bold;
    text-align: center;
    /* 确保标题文字居中 */
}

.blue-line {
    height: 6px;
    background: linear-gradient(to right, #0066ff, #99ccff);
    border-radius: 3px;
    margin: 0 10px;
}

::v-deep .bottom[data-v-6c4d8baa] {
    margin-top: 0px !important;
}

.financing {
    padding: 2px 10px;
    font-size: 13px;
    color: #fff;
    text-align: center;
    border-radius: 4px;
    background-color: #6696fb;
}

.box {
    width: 1296px;
    margin: auto;
}

.list {
    list-style: none;
}

.list-litem {
    height: 180px;
    border-bottom: 2px solid rgb(231, 230, 230);
}

li:hover {
    cursor: pointer;
}

.item {
    display: flex;
    margin-top: 20px;
    padding-left: 20px;
}

.image {
    background-image: url('../assets/image/xinwenxiangqing2.jpg');

    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 320px;
    height: 150px;
}

.list-text {
    padding-left: 20px;
    justify-content: center;
    align-content: center;
}

.title {
    font-size: 20px;
}

.content {
    height: 50px;
    width: 680px;
    margin-top: 20px;
    overflow: hidden;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.foot {
    display: flex;
    justify-content: right;
    color: rgb(174, 175, 176);
    /* margin-left: 100px; */
    margin-top: 20px;
}


.pagination {
    margin: 20px;
    background-color: #fff;
    align-content: center;
    justify-content: center;
}
</style>